<template>
  <demo-content :title="title">
    <canvas ref="canvasRef" width="600" height="300"></canvas>
  </demo-content>
</template>

<script setup lang="ts">
import { onMounted, ref, watch } from "vue";

const title = "Hello Canvas";
const canvasRef = ref<HTMLCanvasElement>();
watch(canvasRef, (canvas) => {
  if (!canvas) return;
  // 获取绘图环境变量
  const context = canvas.getContext("2d")!;

  context.font = "38pt Arial";
  // fillStyle / strokeStyle 可以是 CSS 格式的颜色、渐变色或是图案
  context.fillStyle = "cornflowerblue";
  context.strokeStyle = "blue";
  // 使用 context 的 fillStyle 属性绘制文本
  context.fillText(
    "Hello Canvas", // 要绘制的文本内容
    canvas.width / 2 - 150,
    canvas.height / 2 + 15
  );
  // 使用 context 的 strokeStyle 属性绘制文本轮廓
  context.strokeText(
    "Hello Canvas",
    canvas.width / 2 - 150,
    canvas.height / 2 + 15
  );
});
onMounted(() => {});

// 指定组件上的属性
defineOptions({ title });
</script>

<style src="./default.css" scoped></style>
